<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/admin/notices'}">首页管理</el-breadcrumb-item>
      <el-breadcrumb-item>专业管理</el-breadcrumb-item>
      <el-breadcrumb-item>专业列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card >
      <!--表格区域 stripe 创建带斑马纹的表格-->
      <el-table :data="deptList" stripe style="font-size: 15px;width:1000px;margin:0 100px">
        <el-table-column align="center" label="序号" width="100" type="index" ></el-table-column>
        <el-table-column align="center" label="专业代码" width="140" prop="id"> 
        </el-table-column>
        <el-table-column align="center" label="专业名称" prop="label" width="200" ></el-table-column>
        <el-table-column align="center" label="所属学院" prop="college" width="220" ></el-table-column>
        <el-table-column align="center" label="操作(编辑/人员管理/删除)" width="340" > 
          <template slot-scope="scope" >
            <el-button type="success" icon="el-icon-edit" circle  @click="editDept(scope.row)" ></el-button>
            <el-button type="primary" icon="el-icon-right" circle @click="manageDept(scope.row.id)" style="margin-left:10%"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteDept(scope.row.id, scope.row.label)" style="margin-left:10%"></el-button>
          </template>
        </el-table-column>
      </el-table> 
      <el-row v-if="pageParam.currentPage === lastPage">
        <el-link icon="el-icon-plus" type="primary" round style="margin-left: 45%; margin-top: 20px;font-size: 15px" 
          @click="addDept">录入专业信息</el-link>
      </el-row>
    </el-card>

    <!-- 底部分页按钮 -->
      <el-pagination background style="margin-left:42%"
        :current-page.sync="pageParam.currentPage"
        :page-size.sync="pageParam.pageSize"
        @current-change="nowPage"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>

    <!--修改专业信息的对话框-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px">
      <!--主体内容区域-->
      <el-form :model="deptForm" :rules="deptFormRules" ref="deptFormRef" label-width="80px" style="margin-left:100px">
        <el-form-item prop="id" label="专业代码">
          <el-input v-model="deptForm.id" placeholder="请输入专业代码"></el-input>
        </el-form-item>
        <el-form-item prop="label" label="专业名称">
          <el-input v-model="deptForm.label" placeholder="请输入专业名称"></el-input>
        </el-form-item>
        <el-form-item prop="collegeId" label="所属学院">
          <el-select value-key="id" v-model="deptForm.collegeId" placeholder="请选择课题来源">
            <el-option v-for="college in collegeList" :key="college.id" :value="college.id" :label="college.label"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
        <el-row style="margin-left:30%;margin-top:50px">
          <el-button round @click.native="dialogVisible = false ">取 消</el-button>
          <el-button round v-if="isAdd" type="primary" @click.native="submitDeptForm('deptFormRef', 'add')" style="margin-left:10%">完成录入</el-button>
          <el-button round v-else type="success" @click.native="submitDeptForm('deptFormRef', 'edit')" style="margin-left:10%">提交修改</el-button> 
        </el-row>
      <!--底部按钮区域--> 
    </el-dialog>
  </div>
</template>

<script> 
  import {adminGetAllCollege} from '../../axios/college'
  import {getAdminDeptByPage, getDeptTotal, deleteDeptById, updateDept, adminAddDept} from '../../axios/dept' 
  export default {
    name: 'AdminDeptList',
    data(){
      return {
        lastPage: 0, // 最后一页的页码
        dialogVisible: false, // 添加/编辑 专业对话框的 显示/隐藏
        isAdd: false,
        total: 0, // 专业总数 
        pageParam:{  currentPage: 1,   pageSize: 10  }, // 页码参数
        dialogTitle: '',
        deptList: [], // 专业列表
        collegeList: [], // 学院列表 
        deptForm: { },
        deptFormRules:{
          id: [ { required: true, message: '专业代码不能为空', trigger: 'blur' } ],
          label: [ { required: true, message: '专业名称不能为空', trigger: 'blur' } ],
          collegeId: [ { required: true, message: '所属学院不能为空', trigger: 'blur' } ]
        }
      }
    },
    created(){
      this.getDeptList()
      this.getCollegeList()
    },
    methods:{
      getDeptList(){
        // 向后端发送请求，获取所有专业信息列表
        getAdminDeptByPage(this.pageParam).then(res => {
          if(res.success) this.deptList = res.data  
        })
  
        getDeptTotal().then(res => {
          if(res.success) {
            this.total = res.data 
            this.lastPage = Math.floor(this.total / 10);
            if(this.total % 10 !== 0) this.lastPage ++
          } 
        })
        // 无后端，模拟数据
        // this.deptList = [
        //   { id: '081200', label: '计算机科学与技术', collegeId: '014301', college: '数学与计算机学院' },
        //   { id: '085400', label: '电子信息', collegeId: '014302', college: '信息工程学院' }
        // ]
      },
      getCollegeList(){
        // 向后端发送请求，获取所有学院信息列表
        adminGetAllCollege().then(res => {
          if(res.success) this.collegeList = res.data 
        })

        // 无后端，模拟数据
        // this.collegeList = [
        //   { id: '014301', label: '数学与计算机学院'  },
        //   { id: '014302', label: '信息工程学院'  },
        //   { id: '014303', label: '先进制造学院'  },
        //   { id: '014304', label: '资源与环境学院' },
        //   { id: '014305', label: '生物科学学院' }
        // ]
      },
      // 页码改变时，及时更新数据
      nowPage(page){
        this.pageParam.currentPage = page // 更新当前指向的页码
        this.getDeptList() 
      },  
      // 管理员录入专业信息
      addDept(){
        this.dialogTitle = '录入专业信息'
        this.deptForm = {}
        this.isAdd = true
        this.dialogVisible = true  
      },
      // 管理员编辑指定 id 的专业信息
      editDept(deptData){
        this.isAdd = false
        this.dialogTitle = '编辑专业信息'
        this.deptForm = deptData
        this.deptForm.oldId = deptData.id;
        this.dialogVisible = true   
      },
      // 管理员删除指定 id 的专业信息
      deleteDept(id, label){
        this.$confirm('此操作将永久删除“' + label + ' ”专业, 是否继续?', '提示', {
          roundButton: true,
          confirmButtonText: '删除',
          cancelButtonText: '取消', 
          type: 'warning'
        }).then(() => {
          // 发送后端请求，删除指定 id 的通知
          deleteDeptById(id).then(res => {
             if(res.success){
               this.$message.success('删除成功!'); 
               this.getDeptList()
             }
          }) 
        }).catch(() => {
          this.$message.info('已取消删除!');          
        }); 
      },
      // 决定跳转的路径
      manageDept(id){ 
        let paths = this.$route.path.split('/') 
        let role = paths[paths.length - 1]
        if(role === 'student'){
          this.$router.push(`/admin/dept/${id}/student`) 
        }else{
          this.$router.push(`/admin/dept/${id}/teacher`) 
        }
      },
      submitDeptForm(deptFormRef, todo){
        this.$refs[deptFormRef].validate(valid =>{ 
          if(valid){ 
            this.$confirm('确认提交吗?', '系统提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then( () => {
              if(todo === 'edit'){ 
                // 此时发送后端请求，保存修改信息
                updateDept(this.deptForm).then(res => {
                 if(res.success){
                    this.$message.success('修改成功!') 
                    this.dialogVisible = false 
                    this.getDeptList()
                  } 
                }) 
              }else{ 
                // 此时发送后端请求，保存录入信息  
                adminAddDept(this.deptForm).then(res => {
                  if(res.success){
                    this.$message.success('录入成功!')
                    this.dialogVisible = false 
                    this.getDeptList()
                  }  
                })  
              }  
            }).catch(() => {  
              this.$message.info('已取消提交!');   
            })
          }else{
            this.$message.error('请按要求填写各项信息!')
          }
        })
      },
    }
  }
</script>

<style scoped>
  .el-form-item .el-input{
    width: 57%;
  }
</style>